<template>
  <div class="payment-wrap">
    <div class="nav-bar pt-40">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单结算</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content">
      <h4 class="title">订单结算</h4>
      <div class="address-wrap mt-40 w-500">
        <h5 class="mb-20">收件信息</h5>
        <el-form
          label-width="auto"
          :rules="rules"
          :label-position="'right'"
          :model="formData"
        >
          <el-form-item prop="name" label="收件人：">
            <el-input v-model="formData.name" />
          </el-form-item>
          <el-form-item prop="phone" label="收件手机：">
            <el-input v-model="formData.phone" />
          </el-form-item>
          <el-form-item prop="cityName" label="收件地区：">
            <el-input v-model="formData.cityName" />
          </el-form-item>
          <el-form-item prop="address" label="详细地址：">
            <el-input v-model="formData.address" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary">保存</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="package-wrap">
        <el-card style="max-width: 780px">
          <template #header>
            <div class="card-header">
              <span>商品包裹1</span>
              <span class="text-[12px]">5天发货</span>
            </div>
          </template>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column width="300" prop="name" label="商品信息">
              <template #default="scope">
                <div class="flex">
                  <div>
                    <el-image
                      :preview-teleported="true"
                      fit="cover"
                      style="width: 100px; height: 100px"
                      :preview-src-list="[scope.row.materialImage]"
                      :src="scope.row.materialImage"
                    ></el-image>
                  </div>
                  <div class="ml-10">
                    <div>
                      <span class="text-[14px]">{{ scope.row.name }}</span>
                    </div>
                    <div>
                      <div class="text-[12px]">id:{{ scope.row.id }}</div>
                      <div class="text-[12px]">
                        商家编码: {{ scope.row.code }}
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="supplyPrice" label="商品价">
            </el-table-column>
            <el-table-column prop="renderStatus" label="数量">
            </el-table-column>
            <el-table-column prop="orderCount" label="小计"> </el-table-column>
          </el-table>
        </el-card>
      </div>
      <div class="sum-card">
        <el-card class="wrap" style="max-width: 300px">
          <template #header>
            <div class="card-header">
              <h5>订单总价</h5>
            </div>
          </template>
          <div class="card-content">
            <div
              class="text-custom-black card-item text-[14px] flex justify-between mt-12"
            >
              <div>商品总价</div>
              <div>¥9.23</div>
            </div>
            <div
              class="text-custom-black card-item text-[14px] flex justify-between mt-12"
            >
              <div>发货总额</div>
              <div>¥2.93</div>
            </div>
            <div
              class="text-custom-black card-item text-[14px] flex justify-between mt-12"
            >
              <div>应付总额</div>
              <div class="text-custom-red">¥12.16</div>
            </div>
          </div>
          <template #footer>
            <el-button class="w-full" type="primary">提交订单</el-button>
          </template>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'
import mockData from './mock'

const tableData: any[] = mockData.data.items
interface RuleForm {
  name: string
  phone: string
  cityName: string
  address: string
}

const formData = reactive<RuleForm>({
  name: '',
  phone: '',
  cityName: '',
  address: '',
})
const rules = reactive<FormRules<RuleForm>>({
  name: [{ required: true, message: '必填项' }],
  phone: [{ required: true, message: '必填项' }],
  cityName: [{ required: true, message: '必填项' }],
  address: [{ required: true, message: '必填项' }],
})
</script>

<style scoped lang="scss">
.payment-wrap {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
  .content {
    position: relative;
    margin: 40px 0;
    padding: 30px;
    background-color: #fff;
    border-radius: 6px;
    box-sizing: border-box;
    h4 {
      margin-bottom: 0.5em;
      color: rgba(0, 0, 0, 0.88);
      font-weight: 600;
      font-size: 20px;
      line-height: 1.4;
    }
    h5 {
      margin-bottom: 0.5em;
      color: rgba(0, 0, 0, 0.88);
      font-weight: 600;
      font-size: 16px;
      line-height: 1.5;
    }
    .address-wrap {
    }
    .sum-card {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      text-align: right;
      pointer-events: none;
      .wrap {
        pointer-events: all;
        display: inline-block;
        margin-right: 30px;
        margin-top: 70px;
        position: sticky;
        top: 70px;
        right: 0;
        width: 50%;
        min-width: 200px;
        max-width: 300px;
        padding: 0 20px;
        box-sizing: border-box;
        background: #ffffff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        border: 1px solid #e6e8ec;
      }
      ::v-deep .el-card {
        .el-card__header {
          text-align: left;
        }
        .el-card__footer {
          text-align: left;
        }
      }
    }
  }
}
</style>
